<template>
	<view class="">
		<view class="indexAD">
			<view class="indexADleft">
				<!-- 这里的图片大小不一样所以不宜用v-for
				由于ad的请求是个异步操作 所以要用if判断等加载出来了 在赋值渲染图片 -->
				<template v-if="ad.length > 0">
					<navigator url="#" hover-class="none">
						<image :src="imgUrl + ad[0].image" mode=""></image>
					</navigator>
				</template>
			</view>
			<view class="indexADright">
				<view class="indexADrightItem">
					<template v-if="ad.length > 0">
						<navigator url="#" hover-class="none">
							<image :src="imgUrl + ad[1].image" mode=""></image>
						</navigator>
					</template>
				</view>
				<view class="indexADrightItem">
					<template v-if="ad.length > 0">
						<navigator url="#" hover-class="none">
							<image :src="imgUrl + ad[2].image" mode=""></image>
						</navigator>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			ad:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				imgUrl:this.$imgUrl
			}
		}
	}
</script>

<style>
	.indexAD{
		display: flex;
		border-top: 20rpx solid #f4f4f4;
	}
	.indexADleft{
		width: 50%;
		height: 520rpx;
	}
	.indexADleft image{
		width: 100%;
		height: 520rpx;
	}
	.indexADright{
		width: 50%;
	}
	.indexADrightItem image{
		width: 100%;
		height: 260rpx;
	}
	.indexADrightItem{
		height: 260rpx;
	}
</style>
